<template>
  <div class="page-toolbar glass-dialog">
    <div class="toolbar-left">
      <slot name="left"></slot>
    </div>
    <div class="toolbar-right">
      <slot name="right"></slot>
    </div>
  </div>
</template>

<script setup>
// 无需props，完全通过插槽传递内容
</script>

<style lang="scss" scoped>
.page-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  margin-bottom: 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  backdrop-filter: blur(20px);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.toolbar-left {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.toolbar-right {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

// 统一按钮样式
:deep(.el-button) {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: white !important;
  backdrop-filter: blur(10px) !important;
  transition: all 0.3s ease !important;
  
  &:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(0, 234, 255, 0.3) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
  }
  
  &.el-button--primary {
    background: linear-gradient(135deg, #00eaff, #0099cc) !important;
    border-color: #00eaff !important;
    box-shadow: 0 4px 15px rgba(0, 234, 255, 0.3) !important;
    
    &:hover {
      background: linear-gradient(135deg, #33f0ff, #00b8e6) !important;
      box-shadow: 0 6px 20px rgba(0, 234, 255, 0.4) !important;
    }
  }
  
  &.el-button--success {
    background: linear-gradient(135deg, #67c23a, #85ce61) !important;
    border-color: #67c23a !important;
    box-shadow: 0 4px 15px rgba(103, 194, 58, 0.3) !important;
    
    &:hover {
      background: linear-gradient(135deg, #85ce61, #95d475) !important;
      box-shadow: 0 6px 20px rgba(103, 194, 58, 0.4) !important;
    }
  }
  
  &.el-button--warning {
    background: linear-gradient(135deg, #e6a23c, #f0c78a) !important;
    border-color: #e6a23c !important;
    box-shadow: 0 4px 15px rgba(230, 162, 60, 0.3) !important;
    
    &:hover {
      background: linear-gradient(135deg, #f0c78a, #f5d7ae) !important;
      box-shadow: 0 6px 20px rgba(230, 162, 60, 0.4) !important;
    }
  }
  
  &.el-button--danger {
    background: linear-gradient(135deg, #f56c6c, #f78989) !important;
    border-color: #f56c6c !important;
    box-shadow: 0 4px 15px rgba(245, 108, 108, 0.3) !important;
    
    &:hover {
      background: linear-gradient(135deg, #f78989, #fab6b6) !important;
      box-shadow: 0 6px 20px rgba(245, 108, 108, 0.4) !important;
    }
  }
  
  &.el-button--info {
    background: linear-gradient(135deg, #909399, #b1b3b8) !important;
    border-color: #909399 !important;
    box-shadow: 0 4px 15px rgba(144, 147, 153, 0.3) !important;
    
    &:hover {
      background: linear-gradient(135deg, #b1b3b8, #c8c9cc) !important;
      box-shadow: 0 6px 20px rgba(144, 147, 153, 0.4) !important;
    }
  }
}

// 搜索框样式
:deep(.el-input) {
  .el-input__wrapper {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    
    &:hover {
      border-color: rgba(0, 234, 255, 0.3) !important;
    }
    
    &.is-focus {
      border-color: #00eaff !important;
      box-shadow: 
        inset 0 1px 3px rgba(0, 0, 0, 0.1),
        0 0 10px rgba(0, 234, 255, 0.3) !important;
    }
    
    .el-input__inner {
      color: white !important;
      background: transparent !important;
      
      &::placeholder {
        color: rgba(255, 255, 255, 0.5) !important;
      }
    }
    
    .el-input__prefix,
    .el-input__suffix {
      .el-input__prefix-inner,
      .el-input__suffix-inner {
        color: rgba(255, 255, 255, 0.6) !important;
      }
    }
  }
}

// 选择框样式
:deep(.el-select) {
  .el-input__wrapper {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    
    .el-input__inner {
      color: white !important;
      background: transparent !important;
    }
    
    .el-select__caret {
      color: rgba(255, 255, 255, 0.6) !important;
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .page-toolbar {
    flex-direction: column;
    gap: 15px;
  }
  
  .toolbar-left,
  .toolbar-right {
    width: 100%;
    justify-content: center;
  }
}
</style>
